<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "../../util/request.js";
import {showMessage} from "../../util/message.js";

// 创建路由对象
const router = useRouter()

// 创建线索对象
const clue = ref({})
// 创建市场活动集合
const activityList = ref([])

// 创建查询市场活动列表
const loadActivityList = () => {
  doGet("/api/activity/list", {}).then(resp => {
    if (resp.data.code === 200) {
      activityList.value = resp.data.data;
    } else {
      showMessage('查询市场活动列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}
// 创建称呼集合对象
const appellationList = ref([])
// 查询称呼列表
const loadAppellationList = () => {
  doGet("/api/dic/value/list", {
    typeCode: "appellation"
  }).then(resp => {
    if (resp.data.code === 200) {
      appellationList.value = resp.data.data;
    } else {
      showMessage('查询称呼列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}
// 创建是否贷款集合对象
const needLoanList = ref([])
// 查询是否贷款列表
const loadNeedLoanList = () => {
  doGet("/api/dic/value/list", {
    typeCode: "needLoan"
  }).then(resp => {
    if (resp.data.code === 200) {
      needLoanList.value = resp.data.data;
    } else {
      showMessage('查询列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}

// 创建字段值集合对象
const intentionStateList = ref([])
// 查询是否贷款列表
const loadIntentionStateList = () => {
  doGet("/api/dic/value/list", {
    typeCode: "intentionState"
  }).then(resp => {
    if (resp.data.code === 200) {
      intentionStateList.value = resp.data.data;
    } else {
      showMessage('查询列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}

// 创建字段值集合对象
const stateList = ref([])
// 查询是否贷款列表
const loadStateList = () => {
  doGet("/api/dic/value/list", {
    typeCode: "clueState"
  }).then(resp => {
    if (resp.data.code === 200) {
      stateList.value = resp.data.data;
    } else {
      showMessage('查询列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}

// 创建字段值集合对象
const sourceList = ref([])
// 查询是否贷款列表
const loadSourceList = () => {
  doGet("/api/dic/value/list", {
    typeCode: "source"
  }).then(resp => {
    if (resp.data.code === 200) {
      sourceList.value = resp.data.data;
    } else {
      showMessage('查询列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}

// 创建产品集合对象
const productList = ref([])
// 查询是否贷款列表
const loadProductList = () => {
  doGet("/api/product/list", {}).then(resp => {
    if (resp.data.code === 200) {
      productList.value = resp.data.data;
    } else {
      showMessage('查询列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}

const ruleFormRef = ref({})

// 表单验证规则
const formRules = {
  activityId: [
    {required: true, message: '请选择市场活动', trigger: 'change'}
  ],
  fullName: [
    {required: true, message: '请输入姓名', trigger: 'blur'}
  ],
  appellation: [
    {required: true, message: '请选择称呼', trigger: 'change'}
  ],
  intentionState: [
    {required: true, message: '请选择意向状态', trigger: 'change'}
  ],
  state: [
    {required: true, message: '请选择线索状态', trigger: 'change'}
  ],
  source: [
    {required: true, message: '请选择线索来源', trigger: 'change'}
  ],
  intentionProduct: [
    {required: true, message: '请选择产品', trigger: 'change'}
  ],
  description: [
    {required: true, message: '请输入描述', trigger: 'blur'},
    {min: 3, max: 255, message: '最多255个字符', trigger: 'blur'}
  ]

}

const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      // 准备参数
      let params = {
        id: clue.value.id,
        activityId: clue.value.activityId,
        fullName: clue.value.fullName,
        appellation: clue.value.appellation,
        intentionState: clue.value.intentionState,
        state: clue.value.state,
        source: clue.value.source,
        intentionProduct: clue.value.intentionProduct,
        description: clue.value.description,
        needLoan: clue.value.needLoan,
        phone: clue.value.phone,
        weixin: clue.value.weixin,
        qq: clue.value.qq,
        email: clue.value.email,
        age: clue.value.age,
        job: clue.value.job,
        address: clue.value.address,
        yearIncome: clue.value.yearIncome,
        nextContactTime: clue.value.nextContactTime
      }
      console.log("线索新增请求参数：", params)

      // 判断请求类型
      if (clue.value.id) {
        // 编辑线索信息
        doPut('/api/clue', params)
            .then(resp => {
              if (resp.data.code === 200) {
                showMessage("编辑线索成功", 'success')
                router.push('/index/clue')

              } else {
                showMessage("编辑线索失败，原因：" + resp.data.msg, 'error')
              }
            });
      } else {
        // 新增线索
        doPost('/api/clue', params)
            .then(resp => {
              if (resp.data.code === 200) {
                showMessage("新增线索成功", 'success')
                router.push('/index/clue')
              } else {
                showMessage("新增线索失败，原因：" + resp.data.msg, 'error')
              }
            });
      }

    }
  })
}

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 获取路由参数对象
const route = useRoute()
// 根据标识查询线索信息
const loadClueInfo = (clueId) => {
  doGet('/api/clue/' + clueId, {}).then(resp => {
    if (resp.data.code === 200) {
      clue.value = resp.data.data
    } else {
      showMessage("查询线索信息失败，原因：" + resp.data.msg, 'error')
    }
  })
}


onMounted(() => {
  loadActivityList()
  loadAppellationList()
  loadNeedLoanList()
  loadIntentionStateList()
  loadStateList()
  loadSourceList()
  loadProductList()
  // 获取路由参数
  let clueId = route.params.id
  if (!clueId) return
  // 根据标识查询线索信息
  loadClueInfo(clueId)
})
</script>

<template>
  <h1 v-if="clue.id">线索编辑页面</h1>
  <h1 v-else>线索新增页面</h1>


  <el-form
      ref="ruleFormRef"
      style="max-width: 600px;"
      :model="clue"
      :rules="formRules"
      label-width="auto"
      class="demo-ruleForm">

    <el-form-item label="活动名称" prop="activityId">
      <el-select
          v-model="clue.activityId"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="activity in activityList"
            :key="activity.id"
            :label="activity.name"
            :value="activity.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="姓名" prop="fullName">
      <el-input v-model="clue.fullName"/>
    </el-form-item>

    <el-form-item label="称呼" prop="appellation">
      <el-select
          v-model="clue.appellation"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="appellation in appellationList"
            :key="appellation.id"
            :label="appellation.typeValue"
            :value="appellation.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="clue.phone"/>
    </el-form-item>

    <el-form-item label="微信号码" prop="weixin">
      <el-input v-model="clue.weixin"/>
    </el-form-item>

    <el-form-item label="QQ号码" prop="qq">
      <el-input v-model="clue.qq"/>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="clue.email"/>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model="clue.age"/>
    </el-form-item>

    <el-form-item label="职业" prop="job">
      <el-input v-model="clue.job"/>
    </el-form-item>

    <el-form-item label="年收入" prop="yearIncome">
      <el-input v-model="clue.yearIncome"/>
    </el-form-item>

    <el-form-item label="地址" prop="address">
      <el-input v-model="clue.address"/>
    </el-form-item>

    <el-form-item label="是否贷款" prop="needLoan">
      <el-select
          v-model="clue.needLoan"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="needLoan in needLoanList"
            :key="needLoan.id"
            :label="needLoan.typeValue"
            :value="needLoan.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="意向状态" prop="intentionState">
      <el-select
          v-model="clue.intentionState"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="intentionState in intentionStateList"
            :key="intentionState.id"
            :label="intentionState.typeValue"
            :value="intentionState.id"
        />
      </el-select>
    </el-form-item>


    <el-form-item label="意向产品" prop="intentionProduct">
      <el-select
          v-model="clue.intentionProduct"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="product in productList"
            :key="product.id"
            :label="product.name"
            :value="product.id"
        />
      </el-select>
    </el-form-item>


    <el-form-item label="线索状态" prop="state">
      <el-select
          v-model="clue.state"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="state in stateList"
            :key="state.id"
            :label="state.typeValue"
            :value="state.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="线索来源" prop="source">
      <el-select
          v-model="clue.source"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="source in sourceList"
            :key="source.id"
            :label="source.typeValue"
            :value="source.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="线索描述" prop="description">
      <el-input v-model="clue.description" type="textarea"
                maxlength="255" minlength="3" show-word-limit rows="6"/>
    </el-form-item>

    <el-form-item label="下次联系时间" prop="nextContactTime">
      <el-date-picker
          v-model="clue.nextContactTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      <el-button @click="router.back()">返回</el-button>
    </el-form-item>

  </el-form>
</template>

<style scoped>

</style>